<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>state基础</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库  优先 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom用于支持react操作DOM，依赖react核心库 -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script type="text/javascript" src="../js//babel.min.js"></script>
    <script type="text/babel">
      let that;
      class MyComponent extends React.Component {
        //构造器 只调用一次
        //真实开发过程中，一般不调用constructor，使不使用取决是否在构造器中通过this访问props
        constructor(props) {
          console.log("constructor只调用一次");
          super(props);
          this.state = {
            isHot: false,
            wind: "微风",
          };
          that = this;
          this.changeData = this.changeData.bind(this); //解决changeData中this指向问题
        }
        render() {
          console.log("render被调用了!+N次");
          const { isHot, wind } = this.state; //render里的this是指向MyComponent实例对象
          return (
            <h2 id="title" onClick={this.changeData}>
              今天天气{isHot ? "炎热" : "凉爽"}
              {wind}
            </h2>
          );
        }
        changeData() {
          // console.log(this, "changeData中的this"); //undefined   通过实例调用才行  onClick=this.changeData是直接调用
          //类的方法中开启了局部严格模式，所以this为undefined
          // 解决：   this.changeData = this.changeData.bind(this)
          //  this.state.isHot = !this.state.isHot;页面不会变化切换因为： // 状态不可直接更改，要通过内置的API更改
          console.log(this.state.isHot, "看看最新的isHot值"); //这里打印变了 但是页面没变化
          //解决：状态 必须使用setState方法去更新
          this.setState({
            isHot: !this.state.isHot, //更新是一种合并，不是替换（修改isHot,不影响wind）
            wind: "微风",
          });
        }
      }
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
      //第一种写法 ：  <h2 id="title">   title.addEventListener("click",
      // const title = document.getElementById("title");
      // title.addEventListener("click", () => {
      //   console.log("标题被点击了 h2 id=title  title.addEventListener(click ");
      // });
      //第二种写法 ：  <h2 id="title">   title.onclick = () => {}
      // const title = document.getElementById("title");
      // title.onclick = () => {
      //   console.log("标题被点击了 h2 id=title  title.onclick = () => {}");
      // };
      // //第三种写法（推荐！！！！） ：
      function fn() {
        // console.log(this, "this");
        // "this是undefined，因为fn是自定义函数，babel翻译这段代码会禁止自定义函数this指向window"
        console.log("标题被点击了 h2 onClick={fn} ");
        console.log(that.state.isHot, "isHot");
      }
    </script>
  </body>
</html>
